<template>
  <view>
    <navigator v-if="loginstatus == 2" class="grzx_xx"
               :url="'/packageC/huiyuanxinxi/huiyuanxinxi?info='+JSON.stringify(userinfo)">
      <view class="grzx_tx">
        <image style="width: 100%;height: 100%" :src="userinfo.avatar_url"></image>
      </view>

      <view>
        <view class="grzx_dh">
          <view class="grzx_name">{{ userinfo.nickname }}</view>
          <view class="grzx_hy">{{ userinfo.user_cash_grade_name }}</view>
        </view>
        <view class="grzy_hm">{{ userinfo.mobile }}</view>
      </view>
      <image class="grzy_tztb grzx_xx_tztb" src="/static/pages/img/grzy跳转.png"></image>
    </navigator>

    <navigator v-if="loginstatus == 1" class="grzx_xx" url="/packageC/login/login">
      <view class="grzx_tx"></view>
      <view>
        <view class="grzx_dh">
          <view class="grzx_name">未注册</view>
        </view>
        <view class="grzy_hm"></view>
      </view>
      <image class="grzy_tztb grzx_xx_tztb" src="/static/pages/img/grzy跳转.png"></image>
    </navigator>

    <view class="ge2"></view>

    <view class="grzy_lbk">
      <view class="grzy_lb" @tap="godingdan('/packageA/wodedingdan/wodedingdan')">
        <image class="grzy_tp" src="/static/pages/img/订单.png"></image>
        <view>预订订单</view>
        <image class="grzy_tztb" src="/static/pages/img/grzy跳转.png"></image>
      </view>

      <view class="grzy_lb" @tap="godingdan('/packageA/wodekaquan/wodekaquan')">
        <image class="grzy_tp" src="/static/pages/img/余额.png"></image>
        <view>余额</view>
        <image class="grzy_tztb" src="/static/pages/img/grzy跳转.png"></image>
      </view>

      <view class="grzy_lb" @tap="godingdan('/packageA/wodekaquan/wodekaquan')">
        <image class="grzy_tp" src="/static/pages/img/卡券.png"></image>
        <view>卡券</view>
        <image class="grzy_tztb" src="/static/pages/img/grzy跳转.png"></image>
      </view>

      <view class="grzy_lb" @tap="showModalFun">
        <image class="grzy_tp" src="/static/pages/img/美团.png"></image>
        <view>美团验券</view>
        <image class="grzy_tztb" src="/static/pages/img/grzy跳转.png"></image>
      </view>

      <view class="grzy_lb" @tap="showModal2Fun">
        <image class="grzy_tp" src="/static/pages/img/抖音yq.png"></image>
        <view>抖音验券</view>
        <image class="grzy_tztb" src="/static/pages/img/grzy跳转.png"></image>
      </view>
      <view class="ge2"></view>
      <view class="grzy_lb" @tap="baojied('/packageD/baojie/baojie')">
        <image class="grzy_tp" src="/static/pages/img/卡券.png"></image>
        <view>保洁管理</view>
        <image class="grzy_tztb" src="/static/pages/img/grzy跳转.png"></image>
      </view>
      <view class="grzy_lb" @tap="showDialogFun">
        <image class="grzy_tp" src="/static/pages/img/抖音yq.png"></image>
        <view>我要开店</view>
        <image class="grzy_tztb" src="/static/pages/img/grzy跳转.png"></image>
      </view>

    </view>

    <!-- 美团验券 -->
    <view class="modal-mask" v-if="showModal">
      <view class="modal-container">
        <image class="_x" @tap="hideModal" src="/static/pages/img/x .png"></image>
        <!-- 弹窗内容 -->
        <view class="gr_tc_ding">
          <image class="gr_tc_tp" src="/static/pages/img/美团 (1).png"></image>
          <image class="gr_tc_tp" src="/static/pages/img/大众点评.png"></image>
        </view>

        <view class="dyyq_ss">
          <input class="input_md" type="text" placeholder="请输入美团券码" v-model:value="meituan.code"/>
          <image class="dyyq_sm" src="/static/pages/img/扫码.png" @tap="mtsm()"></image>
        </view>

        <view class="gr_tc_xyb" @tap="verCardCoupon()">
          <view>下一步</view>
        </view>
      </view>
    </view>

    <!-- 抖音验券 -->
    <view class="modal-mask" v-if="showModal2">
      <view class="modal-container">
        <image class="_x" @tap="hideModal" src="/static/pages/img/x .png"></image>
        <!-- 弹窗内容 -->
        <view class="gr_tc_ding gr_tc_dy">
          <image class="gr_tc_tp" src="/static/pages/img/抖音yq.png"></image>
        </view>

        <view class="dyyq_ss">
          <input class="input_md" type="text" placeholder="请输入抖音券码" v-model:value="douyin.code"/>
          <image class="dyyq_sm" src="/static/pages/img/扫码.png" @tap="dysm()"></image>
        </view>

        <view class="gr_tc_xyb" @tap="verdouyin()">
          <view>下一步</view>
        </view>
      </view>
    </view>
    <view style="position:absolute;bottom:0;width: 100%">
      <view style="color: #c2c2c2;font-size: 12px;padding: 6px;text-align: center">本系统由集客猫云提供技术支持</view>
    </view>
  </view>
</template>

<script>
// pages/geren/geren.js
import {houseorderdetails, openStore, userindex, verificationCardCoupon, verifyTicket} from "@/common/api";

var app = getApp();
export default {
  data() {
    return {
      // 示例手机号码
      showModal: false,
      showModal2: false,
      loginstatus: 1,
      userinfo: {},
      meituan: {
        code: ''
      },
      douyin: {
        code: ''
      }
    };
  }
  /**
   * 生命周期函数--监听页面加载
   */,
  onLoad(options) {

    houseorderdetails({
      order_id: options.id
    }, res => {
      console.log('houseorderdetails', res)

    })
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    this.loginstatus = app.globalData.loginstatus;
    if (this.loginstatus == 2) {
      userindex(res => {
        this.userinfo = res.data.data.info
        console.log("userindex", res)
      })
    }
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {
  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {
  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {
  },
  methods: {
    // 进入保洁
    baojied(url){
      if (app.globalData.loginstatus == 2) {
        uni.navigateTo({
          url: url
        })
      } else {
        uni.navigateTo({
          url: "/packageC/login/login"
        })
      }
    },
    // 显示弹窗的方法
    showDialogFun: function () {
      openStore(res=>{
        if (res.data.code==0){
          uni.showModal({
            title: '我要开店',
            content: res.data.data.title+'\n联系人:'+res.data.data.name+'\n手机号:'+res.data.data.mobile,
            icon: 'none',    //如果要纯文本，不要icon，将值设为'none'
            confirmText:'拨号',
            success: function (ssres) {
              if (ssres.confirm) {
                uni.makePhoneCall({
                  // 手机号 这里可以直接写号码如 12345 也可以写获取号码的字段如this.mobile
                  phoneNumber: res.data.data.mobile
                });
              }
            }
          })
        }
      })

    },
    //美团扫码
    mtsm(){
      let _this=this
      // 只允许通过相机扫码
      uni.scanCode({
        onlyFromCamera: true,
        success: function (res) {
          console.log('条码类型：' + res.scanType);
          console.log('条码内容：' + res.result);
          _this.mtyanquasan(res.result)
        }
      });
    },
    //抖音扫码
    dysm(){
      let _this=this
      // 只允许通过相机扫码
      uni.scanCode({
        onlyFromCamera: true,
        success: function (res) {
          console.log('条码类型：' + res.scanType);
          console.log('条码内容：' + res.result);
          _this.dyyanquasan(res.result)
        }
      });
    },
    // 订单
    godingdan(url){
      if (app.globalData.loginstatus == 2) {
        uni.navigateTo({
          url: url
        })
      } else {
        uni.navigateTo({
          url: "/packageC/login/login"
        })
      }
    },
    // 美团验券
    mtyanquasan(code){
      verificationCardCoupon({
        verification_code: code
      }, res => {
        if (res.data.code==0){
          this.meituan.code = ''
          console.log('verifyTicket', res)
          this.showModal=false
          uni.navigateTo({url:"/packageA/wodedingdan/wodedingdan"})
        }else {
          uni.showModal({
            title: res.data.msg,
            showCancel:false,
            icon: 'none',    //如果要纯文本，不要icon，将值设为'none'
            duration: 2000    //持续时间为 2秒
          })
        }
      })
    },
    //美团点评验券
    verCardCoupon() {
      if (!this.meituan.code.trim()) {
        uni.showModal({
          showCancel:false,
          title: '请填写券码',
          icon: 'none',    //如果要纯文本，不要icon，将值设为'none'
          duration: 2000    //持续时间为 2秒
        })
        return
      }
      this.mtyanquasan(this.meituan.code)
    },
    // 抖音验券
    dyyanquasan(code){
      verifyTicket({
        code: code
      }, res => {
        if (res.data.code==0){
          this.douyin.code = ''
          console.log('verifyTicket', res)
          this.showModal2=false
          uni.navigateTo({url:"/packageA/wodedingdan/wodedingdan"})
        }else {
          uni.showModal({
            title: res.data.msg,
            showCancel:false,
            icon: 'none',    //如果要纯文本，不要icon，将值设为'none'
            duration: 2000    //持续时间为 2秒
          })
        }
      })
    },
    //抖音验券
    verdouyin() {
      if (!this.douyin.code.trim()) {
        uni.showModal({
          showCancel:false,
          title: '请填写券码',
          icon: 'none',    //如果要纯文本，不要icon，将值设为'none'
          duration: 2000    //持续时间为 2秒
        })
        return
      }
      this.dyyanquasan(this.douyin.code)

    },
    showModalFun: function () {
      this.setData({
        showModal: true
      });
    },

    showModal2Fun: function () {
      this.setData({
        showModal2: true
      });
    },

    hideModal: function () {
      this.setData({
        showModal: false,
        showModal2: false
      });
    }
  }
};
</script>
<style>
.grzx_xx {
  margin: 20rpx 0 60rpx 50rpx;
  display: flex;

  align-items: center;
}

.grzx_tx {
  width: 170rpx;
  height: 170rpx;
  border-radius: 50%;
  background-color: rgb(224, 215, 208);
  margin-right: 40rpx;
}

.grzx_dh {
  margin-bottom: 30rpx;
  width: 320rpx;
  display: flex;
  justify-content: space-between; /* 子元素之间平均分布在容器中 */
}

.grzx_name {
  font-size: 40rpx;
  margin-right: 15rpx;
}

.grzx_hy {
  margin-top: 13rpx;
  font-size: 23rpx;
  color: rgb(255, 255, 255);
  background-color: rgb(0, 0, 0);
  border-radius: 100rpx; /* 设置边框圆角 */
  width: 100rpx;
  height: 30rpx;
  padding: 3rpx 5% 3rpx 5%;
}

.grzy_hm {
  color: rgb(126, 124, 124);
}

.grzy_lbk {
  margin: 50rpx 30rpx 80rpx 30rpx;
}

.grzy_lb {
  display: flex;
  margin: 30rpx 20rpx 30rpx 20rpx;
  justify-content: space-between; /* 子元素之间平均分布在容器中 */
}

.grzy_tp {
  width: 60rpx;
  height: 60rpx;
  margin-right: -300rpx;
}

.grzy_tztb {
  width: 40rpx;
  height: 40rpx;
}

.grzx_xx_tztb {
  margin-left: 40px;
}

.gr_tc_dy {
  padding-left: 20rpx;
}

.modal-mask {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  z-index: 9999;
}

.modal-container {
  width: 100%;
  background-color: #fff;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  overflow: hidden;
}

.dyyq_ss {
  margin: 80rpx 30rpx 0 30rpx;
  padding: 0 30rpx 0 30rpx;
  height: 90rpx;
  background-color: rgb(238, 238, 238);
  border-radius: 12rpx; /* 设置边框圆角 */
  display: flex; /* 使用Flexbox布局 */
  justify-content: space-between;
  align-items: center; /* 垂直居中 */
  justify-content: space-between; /* 子元素之间平均分布在容器中 */
}

.dyyq_sm {
  width: 50rpx;
  height: 50rpx;
}

.gr_tc_tp {
  width: 70rpx;
  height: 70rpx;
}

.gr_tc_ding {
  margin: 40rpx 0 40rpx 40%;
}

.gr_tc_xyb {
  background-color: rgb(90, 90, 90);
  height: 90rpx;
  margin: 40rpx 30rpx 60rpx 30rpx;
  border-radius: 12rpx; /* 设置边框圆角 */
  display: flex;
  justify-content: center;
  align-items: center;
}

._x {
  width: 40rpx;
  height: 40rpx;
  margin: 40rpx 0rpx 0rpx 670rpx;
}
</style>
